// 这是less注释 这个不可以编译

/*这也是less注释 这种注释可以编译*/

/*less 可以像js 一样 声明变量，函数，嵌套*/

// var a =10;
// let b = 20;
// const PI = 3.1415926;
@import 'demo2.css';
/*less变量*/
@a:#ff0000;
@themeColor:#00b3ff;
@fs:20px;

div{
    color: @themeColor;
    font-size: @fs;
}

/*函数--->混入*/
// .tf{
//     transform: translate(20px,10px);
//     -webkit-transform: translate(20px,10px);
//     -moz-transform: translate(20px,10px);
// }
.tf(@x:5px,@y:5px){
    transform: translate(@x,@y);
    -webkit-transform: translate(@x,@y);
    -moz-transform: translate(@x,@y);
}

div{
    width: 100px;
    height: 100px;
    background-color: @themeColor;
   .tf(10px,10px);
}
h3{
    background-color: @themeColor;
    .tf(30px,40px);
}
h4{
    height: 200px;
    .tf();
}


/*嵌套*/
// .main{}
// .main>div{}
// .main>div>a{}
// .main>div>h2{}
// .main>div>p{}
// .main>div>p>span{}
.main{
    width: 100%;
    height: 200px;
    div{
        height: 100px;
        &::after{
            content:""
        }
        a{
            text-decoration: none;
            &:hover{
                color: @a;
            }
        }
        h2{
            font-weight: normal;
        }
        p{
            line-height: 20px;
            span{
                display: inline;
            }
        }
    }
}